<template lang="pug">
.detail
  .detail-header
    .iconfont.icon-back
    .detail-header-title 材料详情
  .detail-content
    .detail-section
      .detail-section-title 基本信息
      .detail-section-bd.background
        .detail-section-flex
          .detail-col
            .detail-item
              .detail-item-label 供应商名称
              .detail-item-value {{detail.supplierName}}
            .detail-item
              .detail-item-label 材料品牌
              .detail-item-value {{detail.Material.brandName}}
            .detail-item
              .detail-item-label 材料型号
              .detail-item-value {{detail.Material.materialModel}}
            .detail-item
              .detail-item-label 所属业态
              .detail-item-value.flex
                .tag-item(v-for="item in detail.styleName") {{item}}
            .detail-item
              .detail-item-label 供货周期
              .detail-item-value  {{detail.Material.supplyCycle}}天
          .detail-col
            .detail-item
              .detail-item-label 材料名称
              .detail-item-value {{detail.Material.name}}
            .detail-item
              .detail-item-label 生产产地
              .detail-item-value 中国
            .detail-item
              .detail-item-label 材料属性
              .detail-item-value {{detail.Material.attribute == 1 ? '硬装' : '软装'}}
            .detail-item
              .detail-item-label 材料分类
              .detail-item-value {{detail.categoryNodeName}}
            .detail-item
              .detail-item-label 预计送样时间
              .detail-item-value {{detail.Material.serviceTime}}天
    .detail-section.detail-section-imgs
      .detail-section-title
        span 材料规格
        .section-title-line
      .detail-section-bd
        .section-table
          .table-header
            .table-header-item.flex-1.strong(v-for="item in detail.table.header") {{item}}
          .table-body
            .table-item(v-for="item, index in detail.table.body")
              .table-item-cell.flex-1(v-for="row, index in item") {{index == (item.length - 3) || index == (item.length - 4) || index == (item.length - 5) ? '￥' : ''}}{{row}}
    .detail-section.detail-section-imgs
      .detail-section-title
        span 自定义属性
        .section-title-line
      .detail-section-bd
        .attr-table
          .attr-table-header
            .attr-table-header-item.flex-1 属性名称
            .attr-table-header-item.flex-1 属性值
          .attr-table-item(v-for="item in detail.attr")
            .attr-table-item-row.flex-1
              .attr-table-value {{item.name}}
            .attr-table-item-row.flex-1
              .attr-table-value(v-for="row in item.values") {{row.name}}
    .detail-section.detail-section-imgs
      .detail-section-title
        span 固定参数
        .section-title-line
      .detail-section-bd
        .attr-table
          .attr-table-header
            .attr-table-header-item.flex-1 属性名称
            .attr-table-header-item.flex-1 属性值
          .attr-table-item(v-for="item in detail.fixParams")
            .attr-table-item-row.flex-1
              .attr-table-value {{item.attributeName}}
            .attr-table-item-row.flex-1
              .attr-table-value {{item.attributeValue}}
      .detail-section-bd
        .attr-table
          .attr-table-header
            .attr-table-header-item.flex-1 其它说明
            .attr-table-header-item.flex-1 内容
          .attr-table-item(v-for="item in detail.descriptions")
            .attr-table-item-row.flex-1
              .attr-table-value {{item.attributeName}}
            .attr-table-item-row.flex-1
              .attr-table-value {{item.attributeValue}}
    .detail-section.detail-section-imgs
      .detail-section-title
        span 材料主图
        .section-title-line
      .detail-section-bd
        .material-imgs
          .material-img(v-for="item in detail.fileGridMapping", :style="item.fileUrl | filterUrl")
    .detail-section.detail-section-imgs
      .detail-section-title
        span 材料详情图
        .section-title-line
      .detail-section-bd
        .detail-content-img(v-for="item in detail.materialDetail")
          img(:src="item.fileUrl")
    .detail-section.detail-section-imgs(v-show="detail.materialModelFile.length" )
      .detail-section-title
        span 模型文件
        .section-title-line
      .detail-section-bd
        .detail-file(v-for="item in detail.materialModelFile")
          .detail-file-hd
            img(src="../../../static/images/folder.png")
            .detail-file-hd-title {{item.fileName}}
          .detail-file-ft
            a.iconfont.icon-download(:href="item.fileUrl" download="w3logo")
    .detail-footer(v-if="detail.Material.status == 1")
      el-button(size="small" name="info" @click="refuse") 审核拒绝
      el-button(size="small" type="primary" @click="agree") 审核通过
</template>

<script>
import { getMaterialDetail, auditMaterials } from 'api'
export default {
  name: 'hotMaterialDetail',
  data () {
    return {
      detail: {
        fixParams: [],
        descriptions: [],
        fileGridMapping: [],
        categoryNode: [],
        Material: {},
        materialTextureSu: [],
        attr: [],
        materialModelFile: [],
        items: [],
        categoryNodeName: '',
        materialDetail: [],
        table: {
          header: [],
          body: []
        },
        styleName: []
      }
    }
  },
  methods: {
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialDetail, { materialId: this.$route.params.id })
        this.detail = ResultSet.userData
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    agree () {
      this.$confirm('是否审核通过该材料？', '审核通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(async () => {
        try {
          await this.$axios.post(auditMaterials, { idList: this.$route.params.id + '', status: 2 })
          this.$message.success('审核成功！')
          this.getDetail()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    refuse () {
      this.$confirm('是否拒绝该材料？', '审核失败', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        try {
          await this.$axios.post(auditMaterials, { idList: this.$route.params.id + '', status: 3 })
          this.$message.success('审核成功！')
          this.getDetail()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getDetail()
    })
  }
} 
</script>

<style lang="scss" scoped>
.detail {
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px;
  min-height: 100%;
}
.detail-header {
  padding: 23px 40px;
  border-bottom: 1px solid #EDEDED;
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 24px;
    color: #B2B4C7;
    margin-right: 12px;
  }
  .detail-header-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
    color: #3E4373;
  }
}
.detail-content {
  position: relative;
  padding: 32px 40px 0;
}
.detail-section-title {
  position: relative;
  padding-left: 12px;
  font-weight: bold;
  font-size: 18px;
  line-height: 26px;
  color: #B2B4C7;
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 4px;
    height: 10px;
    background: #B2B4C7;
    border-radius: 8px;
  }
  span {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: #fff;
    padding: 0 8px 0 0;
  }
  .section-title-line {
    width: 100%;
    height: 1px;
    background: #EDEDED;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
.detail-section-bd {
  width: 100%;
  margin-top: 16px;
  padding: 24px;
  border-radius: 6px;
  &.background {
    background: #F6F6F9;
  }
  .detail-section-flex {
    display: flex;
  }
  .detail-col {
    width: 33.333%;
  }
  .detail-item {
    margin-bottom: 24px;
  }
}
.detail-item-label {
  font-size: 14px;
  line-height: 22px;
  color: #8B8EAB;
  margin-bottom: 4px;
}
.detail-item-value {
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
  &.flex {
    display: flex;
    flex-wrap: wrap;
  }
}
.tag-item {
  padding: 1px 10px;
  background: rgba(134, 118, 255, 0.1);
  border-radius: 6px;
  font-size: 14px;
  line-height: 22px;
  color: #64698F;
  margin-right: 4px;
  margin-bottom: 4px;
}
.detail-section-ft {
  .detail-item-value {
    width: 66.66%;
  }
}
.detail-section-imgs {
  margin-top: 40px;
}
.detail-image-item {
  width: 240px;
  height: 180px;
  border-radius: 6px 6px 0px 0px;
  margin-right: 16px;
  margin-bottom: 16px;
}
.detail-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  height: 56px;
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-sizing: border-box;
  box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08), 0px 2px 20px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 60px;
}
.table-header {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  .table-header-item {
    display: flex;
    align-items: center;
    background: linear-gradient(0deg, #F8F7FC, #F8F7FC), #F8F7FC;
    border: 1px solid #EDEDED;
    border-right: none;
    line-height: 22px;
    padding: 13px 24px;
    color: #64698F;
    &.strong {
      font-weight: bold;
    }
    &:first-child {
      border-radius: 10px 0 0 0;
    }
    &:last-child {
      border-right: 1px solid #EDEDED;
      border-radius: 0 10px 0 0;
    }
    .el-icon-question {
      margin-left: 10px;
      font-size: 16px;
    }
  }
}
.table-item {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  &:last-child {
    .table-item-cell {
      &:first-child {
        border-radius: 0 0 0 10px;
      }
      &:last-child {
        border-radius: 0 0 10px 0;
      }
    }
    
  }
}
.table-item-cell {
  display: flex;
  align-items: center;
  border: 1px solid #EDEDED;
  border-right: none;
  border-top: none;
  line-height: 22px;
  padding: 13px 24px;
  color: #64698F;
  &:last-child {
    border-right: 1px solid #EDEDED;
  }
}
.attr-table {
  width: 1000px;
  // border: 1px solid #EDEDED;
  // border-radius: 10px;
  .attr-table-item {
    display: flex;
    align-items: center;
    border: 1px solid #EDEDED;
    border-top: none;
    .attr-table-item-row {
      .attr-table-value {
        border-bottom: 1px solid #EDEDED;
        
        &:last-child {
          border-bottom: none;
        }
      }
      &:last-child {
        
        border-left: 1px solid #EDEDED;
      }
    }
    &:last-child {
      border-radius: 0 0 10px 10px;
    }
  }
  .attr-table-header {
    display: flex;
    align-items: center;
  }
  .attr-table-header-item {
    display: flex;
    align-items: center;
    background: linear-gradient(0deg, #F8F7FC, #F8F7FC), #F8F7FC;
    border: 1px solid #EDEDED;
    border-right: none;
    line-height: 22px;
    padding: 13px 24px;
    color: #64698F;
    &.strong {
      font-weight: bold;
    }
    &:first-child {
      border-radius: 10px 0 0 0;
    }
    &:last-child {
      border-right: 1px solid #EDEDED;
      border-radius: 0 10px 0 0;
    }
    .el-icon-question {
      margin-left: 10px;
      font-size: 16px;
    }
  }
  .attr-table-value {
    display: flex;
    align-items: center;
    // border: 1px solid #EDEDED;
    // border-right: none;
    // border-top: none;
    line-height: 22px;
    padding: 13px 24px;
    color: #64698F;
    &:last-child {
      // border-right: 1px solid #EDEDED;
    }
  }
  .attr-table-value {
    line-height: 22px;
    padding: 13px 24px;
    color: #64698F;
  }
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-left {
  justify-content: flex-start;
}
.flex-center {
  justify-content: center;
}
.flex-right {
  justify-content: flex-end;
}
.material-imgs {
  display: flex;
  flex-wrap: wrap;
  .material-img {
    width: 240px;
    height: 180px;
    margin-right: 16px;
    margin-bottom: 16px;
    border-radius: 6px 6px 0px 0px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}
.detail-content-img {
  width: 1200px;
  img {
    width: 100%;
    border-radius: 6px 6px 0px 0px;
  }
}
.detail-file {
  width: 880px;
  height: 56px;
  padding: 0 10px;
  background: #F8FAFD;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .detail-file-hd {
    display: flex;
    align-items: center;
    img {
      margin-right: 4px;
    }
    .detail-file-hd-title {
      font-size: 14px;
      line-height: 22px;
      color: #3E4373;
    }
  }
  .detail-file-ft {
    .iconfont {
      display: inline-block;
      font-size: 24px;
      color: #B2B4C7;
      cursor: pointer;
    }
  }
}
</style>
